<template>
  <div class="header">
    <div class="inner">
      <img class="login1" src="../assets/img/logo1.png" alt="" />
      <p class="nav">
        <router-link to="/index">首页</router-link>
        <router-link to="/school">高校查询</router-link>
        <router-link to="/major">专业查询</router-link>
        <router-link to="/score">智能甄选</router-link>
        <router-link to="/news">高考新闻</router-link>
        <router-link to="/userlogin" v-if="!state">注册登录</router-link>
        <router-link to="/login">管理员登录</router-link>
        <span v-if="state">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link">
              <el-avatar :src="avatar"></el-avatar>
              {{ nickname }}欢迎你
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item icon="el-icon-s-custom"
                >个人信息</el-dropdown-item
              >
              <el-dropdown-item icon="el-icon-error" command="logout"
                >退出登录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </span>
      </p>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      state: true
    }
  },
  created () {
    if (!localStorage.getItem('Zk-Token')) {
      this.state = false
    }
  },
  computed: {
    nickname () {
      return JSON.parse(localStorage.getItem('vivodb')).gx_admin.data[0]
        .nickname
    },
    avatar () {
      return JSON.parse(localStorage.getItem('vivodb')).gx_admin.data[0].avatar
    }
  },
  methods: {
    handleCommand (command) {
      if (command === 'logout') {
        this.$confirm('你确定要退出当前登陆吗', '提示')
          .then(() => {
            localStorage.removeItem('Zk-Token')
            this.$router.replace('/userlogin')
          })
          .catch(() => {})
      }
    }
  }
}
</script>

<style scoped>
.active{
  color: #ff0000;
}
.header {
  background-color: #ffffff;
}
.inner {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  line-height: 60px;
  width: 1200px;
  margin: 0 auto;
}
.header .login1 {
  height: 60px;
}

.header .nav {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  width: 800px;
}
.header .nav a span {
  margin: 0;
  padding: 0;
}
</style>
